<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            startAngle:'210',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            data: [
              {
                value: 200,
                name: 'Search Engine',
                itemStyle: {

                  color: 'blue'
                }
              },
              {
                value: 400,
                name: '3333',
                itemStyle: {  color: 'red' }
              },
              {
                value: 300,
                name: 'Direct',
                itemStyle: {
                  color: 'transparent'
                }
              },

            ]
          }
        ]
      };
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
